
<template>
	<!-- 组件-教学计划表格 -->
	<div>
		<el-row :gutter="30">
			<el-col :span="6">
				<el-button type="text" style="font-size:0.18rem;color:#666666;" @click="back">食谱首页</el-button>
				＞
				<span style="font-size:0.18rem;color:#333333;font-weight:bold;">添加菜谱</span>
			</el-col>
		</el-row>
		<el-row :gutter="10" style="margin-top:0.1rem;">
			<el-col :span="2">
				适用时间：
			</el-col>
			<el-col :span="6">
				{{searchParam.startTime}} 至 {{searchParam.endTime}}
			</el-col>
			<el-col :span="16" style="text-align:right;">
				<el-button @click="addDailyRecipes">添加菜品</el-button>
			</el-col>
		</el-row>
		<table class="table" cellspacing="0" style="width: 100%;margin-top:0.1rem;">
			<thead class="thead">
				<tr>
					<td style="width: 15%;">日期</td>
					<td style="width: 5%;">餐点</td>
					<td style="width: 25%;">菜品介绍</td>
					<td style="width: 10%;">缩略图</td>
					<td style="width: 20%;">添加时间</td>
					<td style="width: 10%;">操作</td>
				</tr>
			</thead>
			<tbody class="tbody">
				<tr v-for="(item,index) in tableList" :key="index">
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td>
						<el-button type="text" @click="editeDailyRecipes(item)">编辑</el-button>
						<el-button type="text" @click="deleteRow(item)">删除</el-button>
					</td>
				</tr>
			</tbody>
		</table>
		<el-row>
			<el-pagination
				class="page"
				layout="total, sizes, prev, pager, next, jumper"
				:current-page="searchParam.currPage"
				@size-change="pageSizeChange"
				@current-change="curPageChange"
				:total="searchParam.total"
			></el-pagination>
		</el-row>

		<el-dialog
			:title="addDailyPopup.title"
			:visible.sync="addDailyPopup.visible"
			width="40%">
				<addDaily ref="addDaily" @cancle="visibleDailyRecipes(false)"></addDaily>
		</el-dialog>
	</div>
</template>

<script>
	import addDaily from './recipes_add_daily'
	let vm;
	export default{
		components:{addDaily},
		data(){
			return {
				searchParam:{
					startTime:'2019-02-15 18:00',
					endTime:'2020-03-05 16:00',
					currPage:1,
					pageSize:1,
					total:0
				},
				tableList:[{}],
				addDailyPopup:{
					visible:false,
					title:'添加每日菜品',
				},
			}
		},
		methods:{
			campusChange : function(campusId) { //校区改变
				
			},
			init(){

			},
			pageSizeChange(val){
				this.searchParam.pageSize=val;
				this.search(1);
			},
			curPageChange(val){
				this.search(val);
			},
			search(pIndex){
				this.searchParam.currPage=pIndex||this.searchParam.currPage;

			},

			back(){
				this.$emit('visibleDaily',1);
			},
			addDailyRecipes(){
				this.addDailyPopup.title='添加每日菜品';
				this.visibleDailyRecipes(true);
			},
			editeDailyRecipes(data){
				this.addDailyPopup.title='编辑每日菜品';
				this.visibleDailyRecipes(true,data);
			},
			visibleDailyRecipes(val,data=null){
				this.addDailyPopup.visible=val;

				if(this.$refs['addDaily']){
					this.$refs['addDaily'].init(data);
				}
				else{
					this.$nextTick(()=>{
						this.$refs['addDaily'].init(data);
					})
				}
			},
			deleteRow(item){
				this.$confirm("此操作将删除该菜品, 是否继续?", "温馨提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
					center: true
				})
				.then(() => {
					//删除

					// vm.search(1);
				})
				.catch(() => {});
			},
		},
		mounted(){
			
		},
		computed:{
			
		},
		watch:{

		}
	}
</script>

<style lang="scss" scoped>
	

	/*自定义滚动条样式*/
	// .box-tasks::-webkit-scrollbar {
	// 	// height: 0.08rem;
	// 	width: 0.05rem;
	// }
	// .box-tasks::-webkit-scrollbar-thumb {
	// 	border-radius: 0.5rem;
	// 	background: #BBBBBB;
	// }
	// .box-tasks::-webkit-scrollbar-track {
	// 	background: rgba(242, 246, 252, 0);
	// }	

	
</style>
<style scoped src="@/style/module/table.css"></style>